<template>
    <div class="relation_warp">
        <div class="title">
            <span>关联孩子</span>
        </div>
        <div class="content">
            <div class="choice">
                <el-row>
                    <el-col :span="20">
                        <el-form ref="form" label-width="0px">
                            <el-form-item style="text-align: left">
                                <el-input placeholder="请输入关联账号" style="width: 600px" v-model="input" clearable> </el-input>
                            </el-form-item >
                            <el-form-item style="text-align: left">
                                <el-select style="width: 600px;" v-model="region" placeholder="请选择关系">
                                    <el-option label="父子" value="父子"></el-option>
                                    <el-option label="父女" value="父女"></el-option>
                                    <el-option label="母子" value="母子"></el-option>
                                    <el-option label="母女" value="母女"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="4" style="text-align: right">
                        <el-button type="primary" size="small" class="btn"
                        @click="operateRelevance">确认关联</el-button>
                    </el-col>
                </el-row>
            </div>
            <el-divider content-position="left" style="color: #409eff;">已关联消息如下</el-divider>
            <div class="joined">
                <div class="joined_list clearFix" v-for="(item, index) in operateRelevanceListP" :key="index">
                    <div class="detail">
                        <el-avatar :size="60" :src="item.photo | pictureUrl" @error="errorHandler">
                            <img class="avatar" src="@a/img/headportrait03.jpg"/>
                        </el-avatar>
                    </div>
                    <div class="school">
                        <span>账户名:{{item.username}}</span>
                       <span>关系:{{item.typeId}}</span>
                    </div>
                    <div class="operation">
                        <el-button  type="primary" size="small" @click="signOut(item)">取消关联</el-button>
                        <span v-if="false">等待验证</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        computed:{
            ...mapState({
                isShowManagement: state => state.commonModule.isShowManagement,
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo
            })
        },
        data(){
            return{
                input:'',
                region:'',
                operateRelevanceListP: []
            }
        },
        created() {
            this.operateRelevanceList()
        },
        methods: {
            errorHandler() {
                return true
            },
            operateRelevance(){
                if(this.input !='' && this.region !=''){
                    this.$store.dispatch('personalModule/operateRelevance',{
                        affiliatedId: this.input,
                        relationId: 0,
                        typeId: this.region
                    }).then(res =>{
                        if (res.data.code === 200){
                            this.operateRelevanceList()
                            this.$notify({
                                message: '关联成功',
                                type: 'success'
                            });
                            this.input = ''
                        }else{
                            this.$notify({
                                message: res.data.msg,
                                type: 'warning'
                            });
                        }
                    })
                }else{
                    this.$message.warning('请输入数据')
                }
            },
            operateRelevanceList() {
                this.$store.dispatch('personalModule/operateRelevanceList',{
                        relationId: 0,
                        id: this.userInfo.id,
                    }).then(res =>{
                        if (res.data.code === 200){
                            this.operateRelevanceListP = res.data.result
                        }else{
                            this.$notify({
                                message: res.data.msg,
                                type: 'warning'
                            });
                        }
                    })    
            },
            signOut(params){
                this.$confirm('确定与 “'+this.userInfo.name+'” 取消关联吗？', '取消提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                     this.$store.dispatch('personalModule/deleteRelevanceByid', {
                        id: params.id
                    }).then(res =>{
                        if(res.data.code == 200){
                            this.operateRelevanceList()
                            this.$message({
                                type: 'success',
                                message: '取消关联成功!'
                            });
                        }   
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消退出'
                    });
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .relation_warp{
        width: 100%;
        .title{
            text-align: left;
            border-bottom: 1px solid #DCDFE6;
            box-sizing: border-box;
            padding-bottom: 10px;
        }
        .content{
            box-sizing: border-box;
            padding-top: 10px;
            .choice{
                .btn{
                    margin-top: 45px;
                }
            }
            .joined{
                .joined_list{
                    padding-left: 25px;
                    box-sizing: border-box;
                    border-bottom: 1px solid #ccc;
                    height: 70px;
                    .operation{
                        float: right;
                        color: #606266;
                        font-size: 14px;
                        margin-top: 15px;
                    }
                    .school{
                        margin-left: 15px;
                        line-height: 60px;
                        color: #606266;
                        font-size: 14px;
                    }
                    .school>span:nth-child(2){
                        margin-left: 40px;
                    }
                    &>div{
                        float: left;
                    }
                }

            }
        }
    }
</style>